import React from 'react';
import { cn } from '@/lib/utils';
import { Link } from 'react-router-dom';

interface DashboardCardProps {
  title: string;
  icon?: React.ReactNode;
  className?: string;
  gradient?: string;
  children: React.ReactNode;
  onClick?: () => void;
  to?: string; // New prop for linking
}

const DashboardCard: React.FC<DashboardCardProps> = ({
  title,
  icon,
  className,
  gradient,
  children,
  onClick,
  to,
}) => {
  const cardClasses = cn(
    'glass-card rounded-xl p-5 overflow-hidden relative group/card',
    gradient && 'overflow-hidden',
    (onClick || to) && 'cursor-pointer transform transition-transform hover:scale-[1.01]',
    className
  );

  // If to prop is provided, render a Link component
  if (to) {
    return (
      <Link to={to} className={cardClasses}>
        {gradient && (
          <div
            className="absolute inset-0 opacity-10 -z-10 transition-opacity duration-500 group-hover/card:opacity-20"
            style={{ background: gradient }}
          />
        )}
        
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-lg font-medium">{title}</h3>
          {icon && (
            <div className="text-primary">
              {icon}
            </div>
          )}
        </div>
        
        <div>{children}</div>
      </Link>
    );
  }

  // Otherwise render as a normal div with optional onClick
  return (
    <div className={cardClasses} onClick={onClick}>
      {gradient && (
        <div
          className="absolute inset-0 opacity-10 -z-10 transition-opacity duration-500 group-hover/card:opacity-20"
          style={{ background: gradient }}
        />
      )}
      
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-lg font-medium">{title}</h3>
        {icon && (
          <div className="text-primary">
            {icon}
          </div>
        )}
      </div>
      
      <div>{children}</div>
    </div>
  );
};

export default DashboardCard;
